import { GridContent } from '@ant-design/pro-layout';
import React, { forwardRef, useState, useEffect, useRef } from 'react';
import { Modal, Descriptions, Button } from 'antd';
import { getDeployConfig, savePublish } from '@/services/project';
import ProcessSetting from '@/pages/project/processsetting';
import app from '@/services/ws/event';
// import { parse } from 'qs';

// eslint-disable-next-line @typescript-eslint/no-unused-vars,@typescript-eslint/ban-types
// @ts-ignore
// eslint-disable-next-line @typescript-eslint/ban-types
const ProcessSettingList: React.ForwardRefExoticComponent = forwardRef(
  (props: { open: boolean; onCancel: Function; onOk: Function; projectId: number }) => {
    const [processList, setProcessList] = useState<PRO.deployConfig[]>();
    const [isProcessSetting, setIsProcessSetting] = useState(false);
    const [currentPublishData, setCurrentPublishData] = useState<PRO.deployConfig>({
      ext_params: '',
      after_upload_step_json: [],
      before_upload_step_json: [],
      create_time: '',
      delete_time: 0,
      files: [],
      id: 0,
      name: '',
      need_upload: 0,
      output_dir: '',
      project_id: 0,
      server_id_json: [],
      update_time: '',
      upload_dir: '',
      upload_exclude_dir: '',
    });
    const ref = useRef(null);
    const handleOk = async () => {
      try {
        // @ts-ignore
        const formData = await ref.current.getFormData();
        formData.project_id = props.projectId;
        await savePublish(formData);
        setIsProcessSetting(false);
        // @ts-ignore
        app.trigger('onreload', () => {
          setIsProcessSetting(false);
        });
      } catch (error) {}
    };
    useEffect(() => {
      if (props.projectId) {
        getDeployConfig(props.projectId).then((data) => {
          // @ts-ignore
          return setProcessList(data);
        });
      }
    }, [props.projectId]);
    return (
      <GridContent>
        <Modal
          title="编辑发布流程"
          open={isProcessSetting}
          onOk={handleOk}
          onCancel={() => {
            setIsProcessSetting(false);
          }}
        >
          <ProcessSetting defaultValue={currentPublishData} ref={ref} />
        </Modal>
        <Modal
          onCancel={() => {
            props.onCancel();
          }}
          open={props.open}
          onOk={() => {
            props.onOk();
          }}
        >
          <div>
            <Button
              size={'small'}
              type={'primary'}
              onClick={() => {
                setIsProcessSetting(true);
                setCurrentPublishData({
                  ext_params: '',
                  after_upload_step_json: [],
                  before_upload_step_json: [],
                  create_time: '',
                  delete_time: 0,
                  files: [],
                  id: 0,
                  name: '',
                  need_upload: 0,
                  output_dir: '',
                  project_id: 0,
                  server_id_json: [],
                  update_time: '',
                  upload_dir: '',
                  upload_exclude_dir: '',
                });
              }}
            >
              新增配置
            </Button>
            {processList?.map((item, index) => {
              return (
                <Descriptions title="构建配置" key={index}>
                  <Descriptions.Item label="配置名称">{item.name}</Descriptions.Item>
                  <Descriptions.Item label="发布到服务器">
                    {item.need_upload == 1 ? '需要发布' : '不需要发布'}
                  </Descriptions.Item>
                  <Descriptions.Item label="服务器路径">{item.upload_dir}</Descriptions.Item>
                  <Descriptions.Item label="输出路径">{item.output_dir}</Descriptions.Item>
                  <Descriptions.Item label="操作">
                    <Button
                      size={'small'}
                      onClick={() => {
                        setIsProcessSetting(true);
                        setCurrentPublishData(item);
                      }}
                    >
                      编辑配置
                    </Button>
                  </Descriptions.Item>
                </Descriptions>
              );
            })}
          </div>
        </Modal>
      </GridContent>
    );
  },
);

export default ProcessSettingList;
